<template>
	<view class="trend">
		
		<navigator :url="'../discover/houseDetail?house_id='+item.id" v-for="(item,index) in houseList">
			<view class="trend-outer">
				<view class="top">
					<image class="avatar" :src=siteUrl+item.avatar></image>
					<view class="info">
						<view class="name">{{item.nickname}}</view>
						<view class="time">{{item.minute}}</view>
					</view>
					<view class="price">{{item.price}}<font style="color:black">元/月</font></view>
				</view>			
				<view class="title">{{item.title}}</view>			
				<view class="pic">				
					<image v-for="(item2,index2) in item.imglist" :src="siteUrl+item2" ></image>							
				</view>
				
				<view class="site">
					<image class="site-icon" src="/static/icon/site.png"></image>
					<view class="note">{{item.location_near}}</view>
				</view>
			</view>
		</navigator>
		
		<uni-load-more  :loadingType="loadingType" :contentText="contentText" :status="status"></uni-load-more>	
	</view>
</template>

<script>
	var _self,
	page = 1,
	timer = null;
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
		   uniLoadMore 
		},
		data() {
			return {
				houseList:[],
				siteUrl:this.websiteUrl,
				status: 'more',
				loadingText: '加载中...',
				loadingType: 2,//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				contentText: {
				    contentdown:'上拉显示更多',
				    contentrefresh: '正在加载...',
				    contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad() {
			_self = this;
			this.gethouseList();
			
		},
		onPullDownRefresh: function() {
			//下拉刷新的时候请求一次数据			
		    this.gethouseList()					
		},
		onReachBottom: function() {
			//触底的时候请求数据，即为上拉加载更多
			//为了更加清楚的看到效果，添加了定时器
		    if (timer != null) {
		        clearTimeout(timer);
		    }		   
			 _self.getmorenews();
		},			
		methods: {
			getmorenews: function() {
				if(_self.status !== 'more'){
					return false
				}						    
				_self.status = 'loading'
			    uni.showNavigationBarLoading();//显示加载动画
			    uni.request({
			        url:this.websiteUrl+'/userapi.php/trends/index?page='+page,
			        method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded'						
					},
					data: {
						token:uni.getStorageSync('token'),						
					},					
			        success: function(res) {			           																	
			            if (res.data.data.length == 0) {//没有数据			                
							_self.status = 'noMore'							
			                uni.hideNavigationBarLoading();//关闭加载动画							
			                return false;
			            }
			            page++;//每触底一次 page +1										
			            _self.houseList = _self.houseList.concat(res.data.data);//将数据拼接在一起			           
						_self.status = 'more'					
			            uni.hideNavigationBarLoading();//关闭加载动画
			        }
			    });
			},
			
			gethouseList(){
				page = 1;
				_self.status = 'more'
				uni.showNavigationBarLoading();	
				uni.request({
					url: this.websiteUrl+'/userapi.php/trends/index?page=1',
					method: 'GET',
					header: {
						'content-type':'application/x-www-form-urlencoded'						
					},
					data: {},
					success:function(res){
						if(res.data.code == 1){							
							page++
							_self.houseList = res.data.data;
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh();//得到数据后停止下拉刷新
						}
					}
				});
			}			
		}
	}
</script>

<style>
    .trend {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #E5E5E5;
		height: 100%;
		position:relative;
	}
	
	.trend-outer{
		width:686rpx;
		height: 478rpx;
		border-radius:16rpx;
		background: white;
		margin-top:4rpx;
		margin-bottom: 16rpx;
	
	}


	.trend-outer .top{
		width:622rpx;
		height: 80rpx;
		margin-left:32rpx;
		padding-top:32rpx;
		position:relative;
	}
	
	.trend-outer .top .avatar{
		width:80rpx;
		height:80rpx;
		float:left;
		border-radius:50%
	}
	
	.trend-outer .top .info{
		width:auto;
		height:80rpx;
		text-align: left;
		margin-left:20rpx;
		float:left;
	}
	
	.trend-outer .top .info .name{
		font-size:30rpx;
		color:#666667;
	}
	
	.trend-outer .top .info .time{
		font-size:22rpx;
		color:#999999;
	}
	
	.price{
		width:auto;
		height: 38rpx;
		font-size:32rpx;
		color:#FF635C;
		position:absolute;
		right:0rpx;
	}
	
	.trend-outer .title{
		width:622rpx;
		height: 28rpx;
		margin-left:32rpx;
		margin-top:32rpx;
		font-size:32rpx;
		color:#373737;
	}
	
	.trend-outer .pic{
		width:622rpx;
		height: 200rpx;
		margin-left:32rpx;
		margin-top:18rpx;
	}
	
	.trend-outer .pic image{
		width:198rpx;
		height:198rpx;
	    float:left;
		border-radius: 32rpx;
	}
	
	.trend-outer .pic image:nth-child(1){
		margin-right:14rpx;
	}
	
	.trend-outer .pic image:nth-child(2){
		margin-right:14rpx;
	}
	
	.site{
		width:622rpx;
		height:34rpx;
		margin-left:32rpx;
		margin-top:24rpx;
	}
	
	.site .site-icon{
		width:24rpx;
		height: 24rpx;
		float:left;
	}
	.site .note{
		float:left;
		width:510rpx;
		margin-left:8rpx;
		height: 34rpx;
		line-height: 34rpx;
		font-size:24rpx;
		color:#999999;
	}
	
	.trend-bg{
		width:100%;
		height: 206rpx;
		background:white;
	}
	
	
</style>
